import React, { useState } from 'react';
import { View, Text } from '@ray-js/ray';
import { Popover } from '@ray-js/smart-ui';
import Strings from '../../i18n';
import styles from './index.module.less';

// 美国节日数据
const US_HOLIDAYS = {
  '1-1': '元旦',
  '1-15': '马丁·路德·金纪念日',
  '2-14': '情人节',
  '2-19': '总统日',
  '3-17': '圣帕特里克节',
  '4-1': '愚人节',
  '5-27': '阵亡将士纪念日',
  '7-4': '独立日',
  '9-2': '劳动节',
  '10-14': '哥伦布日',
  '10-31': '万圣节',
  '11-11': '退伍军人节',
  '11-28': '感恩节',
  '12-25': '圣诞节',
};

const CustomCalendar = ({ curDayDate, setCurDayDate }) => {
  const [currentMonth, setCurrentMonth] = useState(new Date(curDayDate).getMonth());
  const [currentYear, setCurrentYear] = useState(new Date(curDayDate).getFullYear());

  const [shoTips, setShowTips] = useState(false);

  const changeYear = offset => {
    setCurrentYear(currentYear + offset);
  };

  const changeMonth = offset => {
    let newMonth = currentMonth + offset;
    if (newMonth < 0) {
      newMonth = 11;
      changeYear(-1);
    } else if (newMonth > 11) {
      newMonth = 0;
      changeYear(1);
    }
    setCurrentMonth(newMonth);
  };

  const daysInMonth = (month, year) => new Date(year, month + 1, 0).getDate();
  const firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay();

  const renderDays = () => {
    const days = [];
    const totalDays = daysInMonth(currentMonth, currentYear);
    const today = new Date();

    // 添加空白占位符
    for (let i = 0; i < firstDayOfMonth; i++) {
      days.push(<View key={`empty-${i}`} className={styles.dayEmpty} />);
    }

    // 渲染日期
    for (let day = 1; day <= totalDays; day++) {
      const isCurrentDay =
        day === new Date(curDayDate).getDate() &&
        currentMonth === new Date(curDayDate).getMonth() &&
        currentYear === new Date(curDayDate).getFullYear();

      const dateKey = `${currentMonth + 1}-${day}`;
      const isHoliday = US_HOLIDAYS[dateKey] && false;

      const dayContent = (
        <View
          key={day}
          className={`${styles.day} ${isCurrentDay ? styles.selectedDay : ''} ${
            isHoliday ? styles.holiday : ''
          }`}
          onClick={() => {
            const newDate = new Date(currentYear, currentMonth, day);
            setCurDayDate(newDate.getTime());
          }}
          onLongPress={() => {
            setShowTips(true);
          }}
        >
          <Text className={styles.dayText}>{day}</Text>
        </View>
      );

      days.push(
        isHoliday ? (
          <Popover
            key={day}
            slot={{
              overlay: <Text className={styles.holidayTooltip}>{US_HOLIDAYS[dateKey]}</Text>,
            }}
            placement="top"
            show={shoTips}
            duration={1000}
            className={`${styles.day} ${isCurrentDay ? styles.selectedDay : ''} ${
              isHoliday ? styles.holiday : ''
            }`}
          >
            {dayContent}
          </Popover>
        ) : (
          dayContent
        )
      );
    }

    return days;
  };

  // 获取多语言周名称
  const getWeekDays = () => {
    return [...new Array(7).keys()].map(i => Strings.getLang(`calendar_week${i}`));
  };

  return (
    <View className={styles.calendarContainer}>
      <View className={styles.header}>
        {/* Year Selector */}
        <View className={styles.yearSelector}>
          <Text className={styles.controlButton} onClick={() => changeYear(-1)}>
            {Strings.getLang('calendar_prev')}
          </Text>
          <Text className={styles.yearText}>
            {currentYear}
            {Strings.getLang('calendar_year')}
          </Text>
          <Text className={styles.controlButton} onClick={() => changeYear(1)}>
            {Strings.getLang('calendar_next')}
          </Text>
        </View>

        {/* Month Selector */}
        <View className={styles.monthSelector}>
          <Text className={styles.controlButton} onClick={() => changeMonth(-1)}>
            {Strings.getLang('calendar_prev')}
          </Text>
          <Text className={styles.monthText}>
            {currentMonth + 1}
            {Strings.getLang('calendar_month')}
          </Text>
          <Text className={styles.controlButton} onClick={() => changeMonth(1)}>
            {Strings.getLang('calendar_next')}
          </Text>
        </View>
      </View>
      <View className={styles.weekDays}>
        {getWeekDays().map((day, index) => (
          <Text key={index} className={styles.weekDay}>
            {day}
          </Text>
        ))}
      </View>
      <View className={styles.daysContainer}>{renderDays()}</View>
    </View>
  );
};

export default CustomCalendar;
